<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异常捕获</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .demo {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
</body>
<script>

    // TypeError
    // var box = document.getElementsByClassName("box")[0]; // [][0] => undefined
    // box.onclick = function () {
    //     alert(1111);
    // }

    // ReferenceError: a is not defined
    // console.log(a);

    // 正常情况下,代码在执行过程中出现错误,浏览器会抛出错误,代码也不在向后执行 ?
    // 能否让代码在出错时,被捕获到,且不影响后续代码执行 ?


    // var a = 1;
    // var b = 2;
    // var c = a + b;
    // console.log(C);

    // for (var i = 1; i <= 10; i++) {
    //     console.log(i);
    // }


    // try...catch...finally   JS异常捕获 => 用于处理代码中可能出现的错误信息。
    // 错误可能是语法错误，通常是程序员造成的编码错误或错别字。也 可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
    // 1. 用于捕获代码在执行过程中出现的错误,让该错误不影响后续代码的执行
    // 2. 用于捕获代码在执行过程中出现的错误,可以对错误执行一系列补救性措施(兼容写法)

    // 注意:
    // 1. catch 和 finally 语句都是可选的，但你在使用 try 语句时必须至少使用一个。
    // 2. try...catch 同步任务 => 在主线程中直接执行, 不能捕获异步任务中出现的错误 => 可以等异步任务执行时捕获错误


    // 语法:
    // try {
    //     // 尝试执行的代码段
    // } catch (err) {
    //     // 错误发生时的执行代码  (err 错误的信息 对象类型)
    // } finally {
    //     // 无论代码错误与否 都会执行的代码段
    //     // 代码成功 try -> finally
    //     // 代码失败 try -> catch  -> finally
    // }


    // 演示
    /* debugger;
    try {
        console.log("开始执行测试代码");
        setTimeout(function () {
            debugger;
            console.log("异步代码准备执行");
            var a = 1;
            var b = 2;
            var c = a + b;
            console.log(C);
        }, 1000)
    } catch (err) {
        console.log("代码段出现错误", err);
    } finally {
        console.log("代码段执行完毕");
    }

    // 后续的代码
    for (var i = 1; i <= 10; i++) {
        console.log(i);
    } */

    debugger;
    console.log("开始执行测试代码");
    setTimeout(function () {
        try {
            debugger;
            console.log("异步代码准备执行");
            var a = 1;
            var b = 2;
            var c = a + b;
            console.log(C);
        } catch (err) {
            console.log("代码段出现错误", err);
        } finally {
            console.log("代码段执行完毕");
        }
    }, 1000)

    // 后续的代码
    for (var i = 1; i <= 10; i++) {
        console.log(i);
    }









</script>

</html>